iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
3
Software Development

遊戲之美 - 連連看經典遊戲開發系列 第 11

[11- 遊戲製作] 使用模組介紹

  • 分享至 

  • xImage
  •  

什麼是NPM

下面是官網上對於NPM的說明

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

簡而言之,NPM是一個套件管理的工具,我們可以使用npm來建立、分享、發佈模組,並且於其平台上分享、接收其他人對模組的反饋。

NPM創造了node的生態圈,我們可以在其官網上搜尋、下載、安裝、使用、並管理我們所依賴的模組。

模組的選擇

一般而言,在選擇npm的模組時,要去注意一下這個模組的開發者是否有持續在更新、維護模組內容。並從單周下載量,來評估這個套件的普及度,一般很多人在用的套件會較可信賴。

由於node的生態圈現在還算是個戰國時代,有許多在上面分享的模組很有可能過了一陣子發現了bug,套件的開發者卻已經沒在維護了,我們還得要去研究套件本身是否有某些程式碼會造成這bug,會讓我們在開發時的成本大大增加。


上圖中的weekly download、last publish以及下圖中的Dependents(有多少專案使用這個模組)都是我們要去觀察一個套件的指標。

另外網路上相關教學、使用手冊完整度、網路論壇討論度、是否適合我們的專案,也是我們可拿來做選擇模組的考量點。

我所選擇的套件 - 環境與部署相關

var gulp = require('gulp');
var runSequence = require("run-sequence");
gulp.task("build-web", function () {
    runSequence(
        'firstJob',
        'secondJob',
        ['otherJob1', 'otherJob2'],
        function (error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log('success');
            }
        }
    );
});
  • del:可以去刪除本機的檔案。
var gulp = require('gulp');
const del = require("del");
gulp.task('clean', (cb) => {
    return del(["build"], cb);
});
  • gulp:可以編寫complier時要做的動作的腳本
var gulp = require('gulp');
const del = require("del");
gulp.task('job1', () => {
    //some task write here
});
  • gulp-typescript:可以使用gulp來呼叫TypeScript的API去將typescript轉為js
var ts = require('gulp-typescript');
var gulp = require('gulp');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('build',  function() {
    return tsResult.js.pipe(gulp.dest('build'));
});
  • gulp-sourcemaps:可以產生一份xxx.ts.map的檔案,我們可以在debug時連到原始的ts檔案去做偵錯。
  • browser-sync:可以同步瀏覽器,當有檔案被更新時瀏覽器會自動重新整理。
var gulp = require('gulp');
const browserSync = require('browser-sync');
gulp.task('launch-web', ['build-web'], function () {
    browserSync({
        open: true,
        port: 8001,
        files: ["./build/**/*.{html,htm,css,js,json}"],
        server: {
            "baseDir": "./build"
        }
    });
});

我所選擇的套件 - 開發用Library

  • systemjs:這個套件能夠用模組化的方式來加載檔案,我們只需要在開頭打上下面的程式碼,systemJS就會自動去下載相對路徑的js檔案。
import {Loader} from "../core/Loader";

但是若要使用systemJS,則必需在html裡面輸入下面的程式碼,去設定要載入的路徑以及載入檔案的附檔名。

var game;
$(function () {
    SystemJS.config({
        baseURL: "",
        packages: {
            "/": { defaultExtension: "js" }
        }
    });
    //載入第一個要執行的檔案
    SystemJS.import('Main').then(function (m) {
        m.Main.prototype.initGame();
    });
});
  • pixi.js:本系列文章最主要要使用的2D遊戲引擎
  • jquery:大家應該都很熟悉,可以更方便的與html的DOM元件做互動。在開發網頁遊戲時,常常會有某些GUI元件,若使用html來做會更加容易,如線上使用者列表、聊天視窗等...。
    這時候我們通常會在網頁上重疊兩個div元件,下面那一層放canvas,上面則疊上一層html div元件。如loading page時常是用這樣的方式來製作。妥善的利用canvas與html間不同的優勢,會讓遊戲開發上更加的容易。
  • typescript:TypeScript程式物件導向的特性能讓我們在寫TypeScript的時候,有像是寫強型別的語言一樣輕鬆自在,IDE也可以幫忙檢查基本的錯誤。
  • gsap:一個很好用的tween工具,官網GreenSock裡有非常詳細的使用說明,手冊的範例非常的清楚,在這邊也能夠直接預覽特效的樣子。

上一篇
[10- 遊戲製作] PixiJS介紹
下一篇
[12- 遊戲製作] 介面設計
系列文
遊戲之美 - 連連看經典遊戲開發31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言